
.c-top {
    height: 49%;
    width: 100%;
    min-height: 200px;
    position: relative;
}

.c-line {
    height: 4px;
    width: 100%;
    position: relative;
    background: #ffa323;
}

.c-bottom {
    width: 100%;
    height: 49%;
}

/*c-top*/
.c-top .c-state {
    width: 200px;
    height: 100%;
    display: table;
    margin: auto 0;
    float: left;
    text-align: center;
}

.c-state #indicatorContainer {
    display: table-cell;
    vertical-align: middle;
}

.c-top .prompt {
    float: left;
}

.c-top .prompt h2,
.c-top .prompt ul {
    margin-left: 5%;
}

.c-top .prompt h2 {
    color: #0066FF;
}

.c-top .prompt ul {
    list-style: inside;
}

.c-top .prompt li {
    padding: 5px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
}

@keyframes shadow {
    0% {
        -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .3);
        box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .3);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    50% {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    100% {
        -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .3);
        box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .3);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
}

.c-top .prompt li:nth-child(2) {
    -webkit-animation: shadow 1s infinite;
    -o-animation: shadow 1s infinite;
    animation: shadow 1s infinite;
}

.c-top .prompt li:hover {
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .3);
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .3);
}

.c-top .redetect {
    width: 85px;
    height: 30px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    background: #4ad455;
    position: absolute;
    bottom: 15px;
    right: 15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.c-top .redetect:hover {
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .3);
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .3);
}

/*c-bottom*/
.c-bottom ul {
    width: 100%;
    height: 100%;
}

.c-bottom li {
    width: 20%;
    height: 100%;
    display: table;
    text-align: center;
    float: left;
    font-size: 20px;
}

.c-bottom .graphics {
    width: 150px;
    height: 180px;
    display: table-cell;
    vertical-align: middle;
}

.c-bottom .graphics > * {
    cursor: pointer;
}

.c-bottom .data {
    width: 150px;
    height: 150px;
    margin: 0 auto 10px;
    background: #4ad455;
    -webkit-border-radius: 90%;
    -moz-border-radius: 90%;
    border-radius: 90%;
}

@keyframes move {
    0% {
        -webkit-transform:  scale(0.8);
        -moz-transform:  scale(0.8);
        -ms-transform:  scale(0.8);
        -o-transform:  scale(0.8);
        transform:  scale(0.8);
    }
    50% {
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

.c-bottom li .data:hover {
    -webkit-animation: move .2s 1;
    -o-animation: move .2s 1;
    animation: move .2s 1;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
}

.content-m .graphics span {
    background-color: rgba(0, 0, 0, 0);
}

#preview {
    position: relative;
    color: #fff;
    top: 20px;
    clear: both;
}

#canvas-preview {
    width: 85%;
}

@keyframes alarm {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
        box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, .3);
    }
    50% {
        -webkit-transform: scale(.93);
        -moz-transform: scale(.93);
        -ms-transform: scale(.93);
        -o-transform: scale(.93);
        transform: scale(.93);
        -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
        box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, .3);
    }
}

.c-bottom div.rendering {
    background-image: url("../images/huojian.png");
    background-repeat: no-repeat;
    background-position: center;
}

.c-bottom div.app-error {
    background-image: url("../images/error.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-animation: alarm 1s infinite;
    -o-animation: alarm 1s infinite;
    animation: alarm 1s infinite;
    -webkit-box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, .3);
    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, .3);
}

@keyframes boxshadow {
    0% {
        -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
        box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, .3);
    }
    50% {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    100% {
        -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
        box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, .3);
    }
}

.c-bottom div.slow-page {
    -webkit-animation: boxshadow 1s infinite;
    -o-animation: boxshadow 1s infinite;
    animation: boxshadow 1s infinite;
}

.c-bottom div.http-error {
    background-image: url("../images/http.png");
    background-repeat: no-repeat;
    background-position: center;
}

.c-bottom div.retransmission {
    background-image: url("../images/chong.png");
    background-repeat: no-repeat;
    background-position: center;
}

/*提示文字与图标颜色对应*/
div.rendering span.rendering {
    color: #FFF;
    position: relative;
    top: 82%;

}

div.app-error span.app-error {
    color: #FFF;
    position: relative;
    top: 82%;
}

div.http-error span.http-error {
    color: #FFF;
    position: relative;
    top: 82%;
}

div.retransmission span.retransmission {
    color: #FFF;
    position: relative;
    top: 82%;
}

.content-m .rendering, /*服务器响应时间*/
.content-m .http-error, /*http错误*/
.content-m .retransmission { /*重传*/
    color: #4ad455;
    background-color: #4ad455;
}

.content-m .app-error { /*应用错误*/
    color: red;
    background: red;
}

.content-m .slow-page { /*慢页面率*/
    color: #d4d24a;
    background-color: #d4d24a;
}
